<!DOCTYPE html>
<html lang="zh-CN">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="description" content="每多学一点知识，就少写一行代码">
  <meta name="keywords" content="">
  
    <link rel="icon" href="/favicon.ico">
  
    
  <title>hexo系列教程：搭建hexo博客 | 学海无涯</title>
  <link rel="stylesheet" href="/yzx/style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />
</head>

<body>
  <header>
  <div class="header-container">
    <a class='logo' href="/yzx/">
      <span>学海无涯</span>
    </a>
    <ul class="right-header">
      
        <li class="nav-item">
          
            <a href="/yzx/" class="item-link">首页</a>
          
        </li>
      
        <li class="nav-item">
          
            <a href="/yzx/about" class="item-link">关于</a>
          
        </li>
      
        <li class="nav-item">
          
            <a href="/yzx/archives" class="item-link">归档</a>
          
        </li>
      
        <li class="nav-item">
          
            <a href="/yzx/tags" class="item-link">标签</a>
          
        </li>
      
    </ul>
  </div>
</header>

  <main id='post'>
  <div class="content">
    <article>
        <section class="content markdown-body">
          <h1>hexo系列教程：搭建hexo博客</h1>
          <div class='post-meta'>
            <i class="fa fa-calendar" aria-hidden="true"></i> <time>2017年12月31日</time>
            
              | <i class="fa fa-folder-open-o" aria-hidden="true"></i> 
  <div class="article-category">
    <a class="article-category-link" href="/yzx/categories/Hexo教程/">Hexo教程</a>
  </div>



            
            
              | 
                  <i class="fa fa-tag" aria-hidden="true"></i>
                
               
  <a href="/tags/#hexo" class='tag'>hexo</a>


            
          </div>
          <p>Hexo是一个快速、简洁且高效的博客框架。Hexo使用Markdown解析文章，在几秒内，即可利用靓丽的主题生成静态网页。本文介绍如何在Mac以及Windows上搭建Hexo，Linux用户也可以参考。网上关于Hexo的教程也比较多，但大都会让读者在一两个点上卡住。综合官网教程以及自己在安装过程中遇到的问题写下了本教程，一步一步来就可以无痛安装。<br>官网地址：<a href="https://hexo.io/zh-cn/" target="_blank" rel="noopener">https://hexo.io/zh-cn/</a></p>
<p>使用Hexo搭建的个人博客网站：<br>本人博客地址：<a href="http://yaozhixing1688.gitee.io/yzx/" target="_blank" rel="noopener">yaozhixing1688.gitee.io/yzx/</a></p>
<h2 id="安装Hexo"><a href="#安装Hexo" class="headerlink" title="安装Hexo"></a>安装Hexo</h2><p>1、安装Nodejs。</p>
<p><a href="https://link.jianshu.com?t=https://nodejs.org/en/" target="_blank" rel="noopener">node.js下载地址</a> 此步骤省略，请查看官网安装nodejs</p>
<p>2、更改npm源</p>
<pre><code>$ npm config set registry https://registry.npm.taobao.org npm info underscore
</code></pre><p>原因是：国外的NPM源并不稳定，即使翻墙也不一定能将Hexo下载下来，所以这里直接更改为淘宝源。</p>
<p>3、安装hexo</p>
<pre><code>$ npm install -g hexo-cli
</code></pre><p>这里安装的是hexo最新版本，如果想安装以前的的版本请运行命令$ npm install -g hexo</p>
<p>以上步骤不出问题的话就已经在本地机器上搭建起了Hexo环境。下面介绍Hexo的具体使用方法。</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><p>1、创建hexo工程</p>
<pre><code>$ hexo init blog
</code></pre><p>$ cd blog<br>    $ npm install</p>
<p>创建一个文件夹blog（此处blog换成你自己想要的名字），使用Hexo命令初始化blog为blog工程目录。<br>新建完成后，指定文件夹的目录如下：</p>
<pre><code>blog
├── _config.yml
├── package.json
├── scaffolds
├── source
|   └── _posts
└── themes
|   └── landscape
</code></pre><p>好了，一个hexo的项目blog已经建立好了，辣么我们该怎么跑起来了呢？下面来啦…</p>
<p>2、生成静态文件</p>
<pre><code>$ hexo generate
</code></pre><p>他的作用是什么？为什么要生成静态文件。原因就是：简单点就是将Markdown文件解析成HTML文件，放在blog/public目录下。</p>
<p>3、运行hexo服务器</p>
<pre><code>$ hexo server
</code></pre><p>来，让我们跑起来吧~~，它不会自动弹出浏览器打开，需要我们手动打开。所以浏览器输入：<a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000/</a></p>
<p>好了，简单的blog我们搭建好了，那我们怎么上传到git服务器上呢？继续！！</p>
<h2 id="申请gitee免费静态内容空间"><a href="#申请gitee免费静态内容空间" class="headerlink" title="申请gitee免费静态内容空间"></a>申请gitee免费静态内容空间</h2><p>1、我用的是国内码云开源代码，请首先创建一个叫“blog”的项目。如图：<br><img src="http://p1plg3f68.bkt.clouddn.com/bpost1-1.png" alt="gitee创建项目图片实例"></p>
<p>2、复制ssh链接下来，这里我们用ssh链接做，是有原因的，因为https链接地址hexo后面执行一直报错。如下图<br><img src="http://p1plg3f68.bkt.clouddn.com/bpost1-2.jpg" alt="此处输入图片的描述"></p>
<p>3、安装deployer-git</p>
<pre><code>$ npm install hexo-deployer-git --save
</code></pre><p>4、在/blog/_config.yml中修改deploy属性(注意冒号:之后有空格，),把刚才ssh地址复制下来的地址复制在repo上</p>
<pre><code>deploy:
  type: git 
  repo: git@gitee.com:yaozhixing1688/blog.git 
  branch: master 
  message: 博客搭建
</code></pre><p>5、生成SSH密钥过程（每次提交不用输入账号密码）。<br>这里一篇文章介绍怎么生成公共秘钥的：<a href="http://blog.csdn.net/benben513624/article/details/75264005" target="_blank" rel="noopener">http://blog.csdn.net/benben513624/article/details/75264005</a>，下面是我根据本篇文章写得生成秘钥步骤：</p>
<p>（1）、生成密钥</p>
<pre><code>$ ssh-keygen -t rsa -C “yaozhixing797600@163.com” 
</code></pre><p>把yaozhixing797600@163.com换成你的gitee邮箱地址。</p>
<pre><code>![ssh-keygen][7]
</code></pre><p>（2）、进入id_rsa.pub,得到密钥。</p>
<pre><code>cat ~/.ssh/
</code></pre><p>然后会自动一串代码：cat: /c/Users/Administrator/.ssh/:Is a directory</p>
<p><img src="http://p1plg3f68.bkt.clouddn.com/bpost1-4.jpg" alt="进入id_rsa.pub,得到密钥"></p>
<p>（3）、gitee添加ssh。<br>打开gitee账户，【设置】=&gt; 【ssh公钥】，标题写：windows , 如下图：<br><img src="http://p1plg3f68.bkt.clouddn.com/bpost1-5.jpg" alt="gitee添加ssh"></p>
<p>6、代码生成，服务器提交。</p>
<pre><code>$ hexo generate
</code></pre><p>$ hexo deploy</p>
<p>万事OK，快试试用你的独立域名访问Hexo吧。</p>

        </section>
    </article>
    
        <!-- disqus 评论框 start -->
        <div class="comment">
            <div id="disqus_thread" class="disqus-thread">
              <i>加载评论框需要翻墙</i>
            </div>
        </div>
        <!-- disqus 评论框 end -->
    
    
        <!-- livere 评论框 start -->
        <div class="comment">
            <div id="lv-container" data-id="city" data-uid="MTAyMC8zMjMwNS84ODY2"></div>
        </div>
        <!-- livere 评论框 end -->
        
  </div>
  <aside>
    
    <div class="toc-container">
        <h1>目录</h1>
        <div class="content">
            <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#安装Hexo"><span class="toc-number">1.</span> <span class="toc-text">安装Hexo</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Quick-Start"><span class="toc-number">2.</span> <span class="toc-text">Quick Start</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#申请gitee免费静态内容空间"><span class="toc-number">3.</span> <span class="toc-text">申请gitee免费静态内容空间</span></a></li></ol>
        </div>
    </div>
    
  </aside>
</main>

<!-- disqus 公共JS代码 -->
<script type="text/javascript">
  /* * * CONFIGURATION VARIABLES * * */
  var disqus_shortname = "姚志星博客";
  var disqus_identifier = "yaozhixing1688.gitee.io/yzx/2017/12/31/hexo系列教程：搭建hexo博客/";
  var disqus_url = "yaozhixing1688.gitee.io/yzx/2017/12/31/hexo系列教程：搭建hexo博客/";

  isAgent(getDisqus)

  // determine user agent in China
  function isAgent(cb) {
    var url = '//graph.facebook.com/feed?callback=h';
    var xhr = new XMLHttpRequest();
    var called = false;
    xhr.open('GET', url);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
      called = true;
      cb(true);
      }
    };
    xhr.send();
    // timeout 1s, this facebook API is very fast.
    setTimeout(function() {
      if (!called) {
      xhr.abort();
      cb(false)
      }
    }, 1000);
  }

  function getDisqus(isAgent) {
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; 
    dsq.async = true
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq)
  }
</script>
<!-- disqus 公共JS代码 end -->


<script type="text/javascript">
  (function(d, s) {
      var j, e = d.getElementsByTagName(s)[0];

      if (typeof LivereTower === 'function') { return; }

      j = d.createElement(s);
      j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
      j.async = true;

      e.parentNode.insertBefore(j, e);
  })(document, 'script');
</script>


  <footer>
  <div class="copyright">
    <div>
      &copy; 2018 | Powered by <a href="https://hexo.io" target="_blank">Hexo</a>&nbsp
    </div>
    <div>
      Theme by <a href="https://github.com/lewis-geek/hexo-theme-Aath" target="_blank">Aath</a>
    </div>
  </div>
</footer>


<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="/yzx/lib/in-view.min.js"></script>
<script src="/yzx/lib/lodash.min.js"></script>
<script>
  var isDown = true
  var oldY = 0
  inView.offset(50)

  document.body.addEventListener('touchstart', function(){});
  
  window.addEventListener('scroll', _.throttle(e => {
    var currentY = window.scrollY
    if((oldY - currentY) < 0) {
      isDown = true
    } else {
      isDown = false
    }
    oldY = currentY
  }, 250))

  $("article img").each(function() {
      var strA = "<a data-fancybox='gallery' href='" + this.src + "'></a>";
      $(this).wrapAll(strA);
  });

  $('.toc-link').each(function() {
      var href = $(this).attr("href");
      
      inView(href).on('exit', () => {
        if (isDown) {
          handleActive(href)
        }
      })

      inView(href).on('enter', () => {
        if (!isDown) {
          handleActive(href)
        }
      })

      this.onclick = function(e) {
        var pos = $(href).offset().top - 10;
        $("html,body").animate({scrollTop: pos}, 300);
        setTimeout(() => {
          handleActive(href)
        }, 350)
        return false
      }
  })

  function handleActive(href) {
    document.querySelectorAll('.toc-link').forEach(elm => {
      elm.classList.remove('active')
    })
    document.querySelector(".toc [href='"+ href +"']").classList.add('active')
  }
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script>


</body>
</html>
